<html>
<head>
  <title>Auto-hide text box</title>
  <script type="text/javascript" src="..\..\src\AnimeJ.js"></script>
<script>
function transition(btn) {
  var txt = btn.parentNode.getElementsByTagName('input')[0];
  var isHidden = txt.style.display == 'none';
  if (isHidden) txt.style.display = 'inline';
  if (!btn.timeline) {
    var t = new Timeline();
    t.SetAt(0, AnimeJInterp.px(1000, 30, txt.style, 'width', 0, 120));
    t.SetAt(0, AnimeJInterp.alpha(1000, 30, txt, 0.0, 1.0));
    t.OnEnd = function (d, rev) {
      if (!rev)  btn.innerHTML = '&lt;&lt;';
      else { btn.innerHTML = '&gt;&gt;'; txt.style.display = 'none'; }
    };
    btn.timeline = t;
  }
  btn.timeline.Run(!isHidden);
}
</script>
</head>
<body>
  <span>
    <input type="text" width="120px"></input>
    <span style="cursor: pointer; color: Blue" onclick="transition(this)">&lt;&lt;</span>
  </span>
</body>
</html>
